import React, { memo, useState } from 'react'
import type { FC, ReactNode } from 'react'
import { HeaderLeft, HeaderRight, PlayListHeaderWrapper } from './style'
import { useAppSelector } from '@/store'
import Category from '../Category'

interface IProps {
  children?: ReactNode
}

const PlayListHeader: FC<IProps> = () => {
  const [showCategory, setShowCategory] = useState(false)
  const { category, CurrentCategory } = useAppSelector((state) => ({
    category: state.musicplayer.category,
    CurrentCategory: state.musicplayer.currentCategory
  }))
  function closeCategory() {
    setShowCategory(false)
  }
  return (
    <PlayListHeaderWrapper>
      <HeaderLeft>
        <span className="title">{CurrentCategory}</span>
        <button
          className="select"
          onClick={() => setShowCategory(!showCategory)}
        >
          <span>选择分类</span>
          <i className="sprite_icon2"></i>
        </button>
        {showCategory ? <Category closeCategory={closeCategory} /> : null}
      </HeaderLeft>
      <HeaderRight>
        <button className="hot">热门</button>
      </HeaderRight>
    </PlayListHeaderWrapper>
  )
}

export default memo(PlayListHeader)
